<template>
  <div class="sales-board-des">
    <div class="left">
      <p>{{ message }}</p>
      <h2>console.log结果</h2>
      <p>beforecreated：el 和 data 并未初始化</p>
      <p>created:完成了 data 数据的初始化，el没有</p>
      <p>beforeMount：完成了 el 和 data 初始化</p>
      <p>mounted ：完成挂载</p>
      <h2>总结：</h2>
      <p>beforecreate : 举个栗子：可以在这加个loading事件</p>
      <p>created：在这结束loading，还做一些初始化，实现函数自执行</p>
      <p>mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情</p>
      <p>beforeDestroy：你确认删除XX吗？</p>
      <p>destroyed ：当前组件已被删除，清空相关内容</p>
      <button @click="to">to</button>
    </div>
    
    <div class="nav">
      <h2>ref</h2>
      <h4>本页面获取dom元素:</h4>
      <div ref="testDom">11111</div>
      <button @click="getTest">获取test节点</button>
      <h4>拿到子组件中的data:</h4>
      <childlianxi ref="child" />
      <button @click="getHello">获取helloworld组件中的值</button>
      <p>获取childvalue组件中的值:{{ childvalue }}</p>
      <h4>调用子组件的方法:</h4>
      <childlianxi ref="hello" />
      <button @click="getchildlianxi">获取childlianxi组件中的方法</button>
      <h4>子组件调用父组件的方法</h4>
      <childlianxi ref="parent" @refreshData="www" />
      <button @click="parent">按钮</button>
    </div>
    <div style="clear:both"></div>
  </div>
</template>

<script>
import childlianxi from "./value";
export default {
  name: "value",
  components: {
    childlianxi,
  },
  data() {
    return {
      childvalue: "空",
      message: "生命周期",
    };
  },
  methods: {
    to() {
      this.$router.replace({
        name: "cycletwo",
      });
    },
    www() {
      alert("被子组件调用的方法！！！");
    },
    getTest() {
      console.log(this.$refs.testDom);
    },
    //ref获取子组件的值
    getHello() {
      this.childvalue = this.$refs.child.msg;
    },
    //ref获取子组件的方法
    getchildlianxi() {
      this.$refs.hello.ddd();
    },
    parent() {
      this.$refs.parent.ddd();
    },
  },
  // 生命周期

  beforeCreate: function () {
    console.group("beforeCreate 创建前状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
    console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  created: function () {
    console.group("created 创建完毕状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
  },
  beforeMount: function () {
    console.group("beforeMount 挂载前状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
  },
  mounted: function () {
    console.group("mounted 挂载结束状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
  },
  beforeUpdate: function () {
    console.group("beforeUpdate 更新前状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  updated: function () {
    console.group("updated 更新完成状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  beforeDestroy: function () {
    console.group("beforeDestroy 销毁前状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  destroyed: function () {
    console.group("destroyed 销毁完成状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
};
</script>

<style lang="less" scoped>
.sales-board-des {
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;
  button {
    height: 30px;
  }
  .left{
    float: left;
  }
  .nav{
    float: left;
  }
}
</style>